<template>
  <div>
    <el-form
      ref="linkForm"
      :model="linkForm"
    >
      <el-form-item
        label="链接类型"
        prop="type"
      >
        <el-select
          v-model="linkForm.type"
          placeholder="请选择"
          @change="change"
        >
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="链接地址"
        prop="link"
      >
        <el-input
          ref="link"
          v-model="linkForm.link"
          @change="handleChangeValue"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    wxInfo: null,
  },
  data() {
    return {
      linkForm: {
        type: '',
        link: '',
        title: '自定义链接',
      },
      typeList: [
        {
          label: '外部H5链接',
          value: '1',
        },
        {
          label: 'APP内部链接',
          value: '2',
        },
      ],
    };
  },
  created() {
    console.log('wxInfo', this.wxInfo);
    if (this.wxInfo) {
      this.linkForm = this.wxInfo;
    }
  },
  methods: {
    handleChangeValue() {
      const data = { ...this.linkForm, ___type: 'customLink' };
      this.$emit('selected', [data]);
    },
    change(val) {
      const resultArr = this.typeList.filter((item) => {
        return item.value === val;
      });
      if (resultArr) {
        this.linkForm.title = resultArr[0].label;
        this.linkForm.type = resultArr[0].value;
      }

      console.log(this.linkForm, val);
      const data = { ...this.linkForm, ___type: 'customLink' };
      this.$emit('selected', [data]);
    },
  },
};
</script>
